<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2024-02-05 13:01:55
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2024-02-05 13:50:14
 * @FilePath: \yjxa_zjnq\yjszsy\src\components\commonPublic\Toast\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="toast" v-if="isShow" :class="type ? `toast--${type}` : ''">
    <div class="toastBox">
        <i
      class="icon"
      :class="type=='warning'?'el-icon-warning':type=='success'?'el-icon-success':'el-icon-error'"
    ></i>
    <p>{{ content }}</p>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      content: "",
      duration: "",
      type: "",
      isShow: true,
    };
  },
  mounted() {
    setTimeout(() => {
      // 3s 后通过父级移除子元素的方式来移除该组件实例和 DOM 节点
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    }, this.duration);
  },
};
</script>

<style lang="scss" scoped>
.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 15px;
//   bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  // position: absolute;
  // top: 0;
  z-index: 9999;
  background: transparent;

.toastBox {
    display: flex;
    padding: 15px 15px 15px 20px;
    align-items: center;
    border-radius: 3px;
    > p {
    font-size: 18px;
    border-radius: 4px;
    display: block;
    margin-left: 15px;
  font-size: 14px;
 
  }
}


  &--error .toastBox {
    background-color: #fef0f0;
    border-color: #fde2e2;
}
  // error和success的样式

  &--error p {
    
    color: #f56c6c;
  }
  &--error i {
    color: #f56c6c;
    font-size: 40px;
  }
  &--success .toastBox {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
}
  &--success p {
    
    color: #67c23a;
  }
  &--success i {
    color: #67c23a;
    font-size: 40px;

  }
  &--warning .toastBox {
    background-color: #fdf6ec;
    border-color: #faecd8;
}
  &--warning p {
   
    color: #e6a23c;
  }
  &--warning i {
    color: #e6a23c;
    font-size: 40px;

  }


}
</style>
